<template>
  <uni-popup ref="popupRef" type="bottom" background-color="#F9F6F6" borderRadius="24rpx 24rpx 0rpx 0rpx"
             :is-mask-click="false">
    <view class="refuse_pop">
      <view class="pop_title_box">
        <view class="pop_title">
          <text>价格明细</text>
        </view>
        <uni-icons @click="handleClosePop()" class="closeempty_icon" type="closeempty" size="26"></uni-icons>
      </view>
      <view class="pets_list_box">
        <view class="fee_box">
          <view class="fee_container">
            <view class="fee_wrapper">
              <view class="fee_detail_box">
                <view class="fee_title">
                  <view class="fee_name">基础费</view>
                  <view class="fee_price">{{ orderInfo.baseAmount }}元</view>
                </view>
                <view class="fee_tips">
                  包含基础里程3Km，宠物{{ orderInfo.petNum }}只，服务时长{{
                    new BigNumber(orderInfo.goodsSkuServiceTime).times(orderInfo.serviceDays)
                  }}分钟
                </view>
                <view class="fee_service"
                      v-for="item in orderInfo.serviceTimeSlotArray" :key="item">
                  <view class="fee_service_name">
                    {{ item?.split(',')[0] }}-{{ item?.split(',')[1].substring(10) }}
                  </view>
                  <view class="fee_service_price">
                    {{ new BigNumber(orderInfo.baseAmount).div(orderInfo.serviceDays) }}元
                  </view>
                </view>
              </view>
              <view class="fee_detail_box" v-if="Number(orderInfo.extAmount?.distance_amount)">
                <view class="fee_title">
                  <view class="fee_name">里程费</view>
                  <view class="fee_price">{{ orderInfo.extAmount?.distance_amount }}元</view>
                </view>
                <view class="fee_tips">
                  超出{{ orderInfo.petRangeMarkUpInfo?.startValue }}Km部分，每多{{
                    orderInfo.petRangeMarkUpInfo?.outValue
                  }}Km加价{{
                    orderInfo.petRangeMarkUpInfo?.upPrice
                  }}元（{{ new BigNumber(orderInfo.realDistance).div(1000) }}Km）
                </view>
                <view class="fee_tips">基础里程（{{ orderInfo.petRangeMarkUpInfo?.startValue }}Km）</view>
                <!--                <view class="fee_service" v-for="(item,index) in distanceNumList">-->
                <!--                  <view class="fee_service_name">{{ item.value }}</view>-->
                <!--                  <view class="fee_service_price">{{ getDistancePrice(index) }}元 × {{ orderInfo.serviceDays }}天 = {{-->
                <!--                      getDistancePriceDays(index)-->
                <!--                    }}元-->
                <!--                  </view>-->
                <!--                </view>-->
                <view class="fee_service"
                      v-for="(item,index) in orderInfo.serviceTimeSlotArray">
                  <view class="fee_service_name"> {{ item?.split(',')[1].substring(0, 10) }}</view>
                  <view class="fee_service_price">
                    {{ getDistanceNumPrice(index) }}元
                  </view>
                </view>
              </view>
              <view class="fee_detail_box" v-if="Number(orderInfo.extAmount?.count_amount)">
                <view class="fee_title">
                  <view class="fee_name">多宠费</view>
                  <view class="fee_price">{{ orderInfo.extAmount?.count_amount }}元</view>
                </view>
                <view class="fee_tips">超过{{ orderInfo.petNumMarkUpInfo?.startValue }}只部分，每多{{
                    orderInfo.petNumMarkUpInfo?.outValue
                  }}只宠物加价{{ orderInfo.petNumMarkUpInfo?.upPrice }}元（{{ orderInfo.petNum }}只）
                </view>
                <view class="fee_tips">基础数量（{{ orderInfo.petNumMarkUpInfo?.startValue }}只）</view>
                <view class="fee_service"
                      v-for="(item,index) in orderInfo.serviceTimeSlotArray">
                  <view class="fee_service_name"> {{ item?.split(',')[1].substring(0, 10) }}</view>
                  <view class="fee_service_price">
                    {{ getPetNumPrice(index) }}元
                  </view>
                </view>
              </view>
              <view class="fee_discount" v-if="Number(orderInfo.discountAmount)">
                <view>订单改价</view>
                <view>-{{ orderInfo.discountAmount }}元</view>
              </view>
            </view>
          </view>
        </view>
        <view class="server_info">
          <text class="server_days">服务{{ orderInfo.serviceDays }}天，</text>
          <text class="server_money">总计：¥{{ orderInfo.payAmount }}</text>
        </view>
      </view>
    </view>
  </uni-popup>
</template>

<script setup>
import {ref, reactive} from "vue";
import BigNumber from "bignumber.js";

let orderInfo = reactive({})
let popupRef = ref()
const handleOpenPop = async (info) => {
  Object.assign(orderInfo, JSON.parse(info))
  orderInfo.extAmount = JSON.parse(orderInfo.extAmountJson || {});
  orderInfo.petRangeMarkUpInfo = JSON.parse(orderInfo.petRangeMarkUp || {});
  orderInfo.petNumMarkUpInfo = JSON.parse(orderInfo.petNumMarkUp || {});
  popupRef.value.open()
}
// 计算超出每段距离多少价格
const getDistancePrice = (index) => {
  let price = new BigNumber(orderInfo.extAmount?.count_amount).div(new BigNumber(new BigNumber(orderInfo.realDistance).div(1000)).minus(orderInfo.petRangeMarkUpInfo?.startValue).div(orderInfo.petRangeMarkUpInfo?.outValue)).toNumber().toFixed(2)
  if (index == distanceNumList.length - 1) {
    return new BigNumber(orderInfo.extAmount?.count_amount).minus(new BigNumber(distanceNumList.length - 1).times(price)).toFixed(2)
  } else {
    return price
  }
}
// 计算每段距离价格*服务天数
const getDistancePriceDays = (index) => {
  let distancePrice = getDistancePrice(index)
  return new BigNumber(distancePrice).times(orderInfo.serviceDays)
}
// 计算有多少个距离区间
let distanceNumList = reactive([])
const getDistanceNum = async () => {
  distanceNumList = []
  let distanceNum = Math.floor(new BigNumber(orderInfo.realDistance).div(1000).minus(orderInfo.petNumMarkUpInfo?.startValue).div(orderInfo.petRangeMarkUpInfo?.outValue).toNumber())
  console.log(distanceNum, 'distanceNum');
  if (distanceNum > 1) {
    for (let i = 0; i <= distanceNum - 1; i++) {
      console.log(i, 'iiiii');
      let firstDistance = new BigNumber(orderInfo.petRangeMarkUpInfo?.startValue).plus(new BigNumber(i).times(orderInfo.petRangeMarkUpInfo?.outValue))
      let lastDistance = new BigNumber((i + 1)).times(orderInfo.petRangeMarkUpInfo?.outValue).plus(orderInfo.petRangeMarkUpInfo?.startValue).toNumber()
      if (i === distanceNum - 1) {
        if (new BigNumber(orderInfo.realDistance).div(1000).toNumber() < lastDistance) {
          lastDistance = new BigNumber(orderInfo.realDistance).div(1000).toNumber()
        }
        // if (firstDistance > lastDistance) {
        //   firstDistance = firstDistance - 1
        // }
      }
      distanceNumList.push({
        index: i,
        value: `${firstDistance}-${lastDistance}Km`
      })
    }
  }
}
// 计算多出的宠物每天的价格
const getPetNumPrice = (index) => {
  let serviceTimeSlotList = orderInfo.serviceTimeSlotArray
  let price = new BigNumber(orderInfo.extAmount?.count_amount).div(orderInfo.serviceDays).toNumber().toFixed(2)
  if (index == serviceTimeSlotList.length - 1) {
    return new BigNumber(orderInfo.extAmount?.count_amount).minus(new BigNumber(orderInfo.serviceDays - 1).times(price)).toFixed(2)
  } else {
    return price
  }
}
// 计算多出的距离每天的价格
const getDistanceNumPrice = (index) => {
  let serviceTimeSlotList = orderInfo.serviceTimeSlotArray
  let price = new BigNumber(orderInfo.extAmount?.distance_amount).div(orderInfo.serviceDays).toNumber().toFixed(2)
  if (index == serviceTimeSlotList.length - 1) {
    return new BigNumber(orderInfo.extAmount?.distance_amount).minus(new BigNumber(orderInfo.serviceDays - 1).times(price)).toFixed(2)
  } else {
    return price
  }
}
const handleClosePop = () => {
  popupRef.value.close()
}
defineExpose({
  handleOpenPop,
  handleClosePop,
})
</script>

<style scoped lang="scss">
.refuse_pop {
  max-height: 90vh;
  overflow-y: auto;
  width: 100%;
  background: #F9F6F6;
  border-radius: 24rpx 24rpx 0rpx 0rpx;
  padding: 0 32rpx 68rpx 32rpx;
  box-sizing: border-box;
  position: relative;
  line-height: 1;


  .pop_title_box {
    display: flex;
    justify-content: space-between;
    position: sticky;
    padding-top: 48rpx;
    padding-bottom: 50rpx;
    top: 0;
    left: 0;
    background: #F9F6F6;

    .pop_title {
      font-weight: bold;
      font-size: 40rpx;
      color: #1B2120;
    }

    .closeempty_icon {
      color: #1B2120;
      font-weight: bold;
    }
  }
}

.fee_box {
  background: #F9F6F6;
  border-radius: 24rpx;
  box-sizing: border-box;

  .fee_container {
    display: flex;
  }

  .fee_wrapper {
    width: 100%;
    box-sizing: border-box;
    background: #FFFFFF;
    border-radius: 24rpx;
    padding: 40rpx 32rpx 0 32rpx;


    .fee_detail_box {
      padding-bottom: 40rpx;
      margin-bottom: 40rpx;
      border-bottom: 1rpx solid #E6E6E6;

      .fee_title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 30rpx;
        color: #1B2120;
        font-weight: bold;
        margin-bottom: 40rpx;
      }

      .fee_tips {
        font-size: 24rpx;
        color: #5C5E5E;
        margin-bottom: 24rpx;
      }

      .fee_service {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 24rpx;
        color: #7C807F;
        margin-bottom: 24rpx;
      }

      .fee_service:last-child {
        margin-bottom: 0;
      }
    }

    .fee_detail_box:last-child {
      border-bottom: none;
      margin-bottom: 0;
    }

    .fee_discount {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 30rpx;
      color: #1B2120;
      font-weight: bold;
      padding-bottom: 40rpx;
    }
  }
}

.server_info {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 46rpx;

  .server_days {
    font-weight: 400;
    font-size: 26rpx;
    color: #1B2120;
  }

  .server_money {
    font-weight: bold;
    font-size: 30rpx;
    color: #1B2120;
    margin-left: 8rpx;
  }
}

</style>